<template>
  <div class="data-card" :style="{ background }">
    <div class="data-card__label">{{ label }}</div>
    <div class="data-card__value">{{value}}
<!--        <count-to :start-val="0" :end-val="value" :duration="2600"-->
<!--                  class="card-panel-num"/>-->
    </div>
    <svg-icon class-name="data-card__icon" :icon-class="icon" />
  </div>
</template>

<script>
import CountTo from "vue-count-to";

export default {
  name: 'BaseCard',
    components: {CountTo},
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number],
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    background: {
      type: String,
      default: '#2AD199'
    }
  }
}
</script>

<style lang="scss" scoped>
.data-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100px;
  padding: 0 24px;
  border-radius: 6px;
  color: #fff;
  margin-bottom: 10px;

  &__label {
    font-size: 14px;
  }

  &__value {
    font-size: 24px;
    margin-top: 12px;
  }

  &__icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 24px;
    width: 48px;
    height: 48px;
    margin: auto 0;
    fill: currentColor;
    opacity: 0.6;
  }
}
</style>
